<template>
	<view class="login">
		<view class="login-box">
			<image class="logo" src="https://img.qiananquang.com/minapp/logo.png" mode=""></image>
			<view class="login-box-title">
				<text class="slogan">Hi，欢迎加入我们!</text>
				<text class="slogan2">已经购买学员请使用身份证号码登录</text>
			</view>
			<view class="login-userinfo">
				<view class="login-nickname">
					<text>手机号码： </text>
					<view class="login-input">
						<!-- <input type="nickname" /> -->

						<up-input v-model="userinfo.phone" placeholder="请输入手机号码" :customStyle="{
							'fontSize': '30rpx',
							'fontWeight': '700',
							'border': 'none'
						}">
							<!-- vue3模式下必须使用v-slot:suffix -->
							<template v-slot:suffix>
								<up-code @end="end" @start="start" ref="code" :seconds="seconds"
									@change="codeChange"></up-code>
								<up-button @click="getCode" :text="tips" size="normal" type="success"></up-button>
							</template>
						</up-input>

					</view>
				</view>
				<view class="login-nickname">
					<text>验证码： </text>
					<view class="login-input">
						<!-- <input type="nickname" /> -->
						<up-input v-model="userinfo.code" placeholder="请输入6位验证码" :customStyle="{
							'fontSize': '30rpx',
							'fontWeight': '700',
							'border': 'none'
						}">

						</up-input>
					</view>
				</view>
				<view class="login-nickname">
					<text>密码 </text>
					<view class="login-input">
						<up-input type="password" border="none" :fontSize="'30rpx'" :customStyle="{
							'fontSize': '30rpx',
							'fontWeight': '700'
						}" v-model="userinfo.password" placeholder="请输入密码" />
					</view>
				</view>
				<view class="login-nickname">
					<text>确认密码： </text>
					<view class="login-input">
						<up-input type="password" border="none" :fontSize="'30rpx'" :customStyle="{
							'fontSize': '30rpx',
							'fontWeight': '700'
						}" v-model="userinfo.confirmPassword" placeholder="请输入密码" />
					</view>
				</view>
			</view>
			<view class="login-btn">
				<button class="wxlogin" open-type="getUserInfo" @click="loginBtn">注册</button>
				<!-- <button open-type="getRealtimePhoneNumber"
					@getrealtimephonenumber="getrealtimephonenumber">微信一键登录</button> -->
			</view>
			<view class="login-tips">
				已有账号？<navigator url="/pages/login/login"
					style="color: #FB4030;text-decoration: underline;display: inline-block;">
					去登录</navigator>
			</view>
			<view class="agreement-box">
				<up-checkbox-group v-model="checkboxValue" :labelDisabled="true">
					<up-checkbox name="1" shape="circle">
						<view class="agreement-txt">
							<text>我已阅读并同意</text>
							<text class="agreement">《用户协议》、</text>
							<text class="agreement">《隐私政策》</text>
						</view>
					</up-checkbox>
				</up-checkbox-group>
			</view>
		</view>
	</view>
</template>

<script>
import {
	getWxPhone,
	getWxLogin,
	getPhoneCode,
	postVerifyPhone,
	userReg,
	getDetail,
	putUserUpdate,
	login
} from '@/http/user.js'
export default {
	name: "loginPopup",
	data() {
		return {
			userinfo: {
				avatar: '',
				nickname: ' ',
				gender: null,
				phone: '',
				password: '',
				confirmPassword: ''
			},
			tips: '获取验证码',
			seconds: 60,
			checkboxValue: false,
			rules: {

			}
		};
	},
	methods: {
		onChooseAvatar(val) {
			this.userinfo.avatar = val.detail.avatarUrl
		},
		nickBlur(val) {
			console.log(val.detail.value, 0, val);
			this.userinfo.nickname = val.detail.value
		},
		getrealtimephonenumber(val) {
			console.log(val);
		},
		loginBtn(val) {
			console.log(this.userinfo);
			if (this.checkboxValue.length == 0) {
				return uni.showToast({
					title: '请点击阅读协议',
					icon: 'none',
				})
			}
			if (!this.userinfo.code || this.userinfo.code.length < 4) {
				return uni.showToast({
					title: '请输入正确的验证码',
					icon: 'none',
				})
			}
			if (!this.userinfo.password || !this.userinfo.confirmPassword) {
				return uni.showToast({
					title: '请输入密码和确认密码',
					icon: 'none',
				})
			}
			if (this.userinfo.password !== this.userinfo.confirmPassword) {
				return uni.showToast({
					title: '两次输入的密码不一致',
					icon: 'none',
				})
			}
			if (this.userinfo.password.length < 8) {
				return uni.showToast({
					title: '密码不能低于8位',
					icon: 'none',
				})
			}
			uni.clearStorageSync()
			let params = {
				authCode: this.userinfo.code,
				phone: this.userinfo.phone,
				username: this.userinfo.phone,
				password: this.userinfo.password,
				nickname: '微信用户'
			}
			uni.login({
				provider: 'weixin', //使用微信登录
				success: (loginRes) => {
					console.log(loginRes);
					this.wxCode = loginRes.code
					userReg(params).then(res => {
						// return
						getWxLogin({
							code: this.wxCode
						}).then(async res => {
							login({
								username: this.userinfo.phone,
								password: this.userinfo.password
							}).then(res => {
								uni.setStorageSync('token', res.data.token)
								putUserUpdate({ wechatOpenid: res.data.wechatOpenid })
								getDetail().then(detailRes => {
									uni.showModal({
										title: '提示',
										content: '注册成功，账号为' + this.userinfo.phone + '，密码为' + this.userinfo.password + '，请妥善保管！',
										showCancel: false,
										confirmText: '去登录',
										success: ({ confirm, cancel }) => {
											if (confirm) {
												uni.setStorageSync('userinfo', detailRes.data)
												uni.navigateBack({
													delta: 2
												});
											}
										}
									})

								})
							})
						})
					})
				}
			});
			uni.getUserInfo({
				provider: 'weixin',
				success: (infoRes) => {
					console.log(infoRes.userInfo);
					this.userinfo.avatar = infoRes.userInfo.avatarUrl
					this.userinfo.nickname = infoRes.userInfo.nickName
					this.userinfo.gender = infoRes.userInfo.gender
				}
			})
		},
		codeChange(text) {
			this.tips = text;
		},
		getCode() {
			if (!/^1\d{10}$/.test(this.userinfo.phone)) {
				return uni.showToast({ title: '请输入正确的手机号', icon: 'none' });
			}
			if (this.$refs.code.canGetCode) {
				// 模拟向后端请求验证码
				uni.showLoading({
					title: '正在获取验证码'
				})
				getPhoneCode({
					phone: this.userinfo.phone
				}).then(res => {
					uni.hideLoading();
					// 这里此提示会被this.start()方法中的提示覆盖
					uni.$up.toast('验证码已发送');
					// 通知验证码组件内部开始倒计时
					this.$refs.code.start();
					// 通知验证码组件内部开始倒计时
				})

			} else {
				uni.showToast({
					title: '倒计时结束后再发送',
					icon: 'none'
				});
			}
		},
		end() {
			uni.$up.toast('倒计时结束');
		},
		start() {
			uni.$up.toast('倒计时开始');
		}

	}
}
</script>

<style lang="scss" scoped>
page {
	background: linear-gradient(180deg, #FFDDDA, rgba(237, 237, 237, 0));
	background-size: 100% 345rpx;
	background-repeat: no-repeat;
	background-color: #F7F6F9;
}

.login {
	background: url('https://img.qiananquang.com/minapp/loginbg.png') no-repeat top left / 100% 310rpx;
}

.login-box {


	padding: 40rpx 70rpx 30rpx 70rpx;

	.logo {
		width: 135rpx;
		height: 135rpx;
		// background: #FB4939;
	}

	.login-box-title {
		// text-align: center;
		margin-top: 50rpx;

		text {
			display: block;
		}

		.slogan {
			font-weight: 700;
			font-size: 46rpx;
			color: #2C2821;
			margin-bottom: 10rpx;
		}

		.slogan2 {
			font-weight: 500;
			font-size: 24rpx;
			color: #CCCBCB;
			margin-top: 15rpx;
		}
	}

	.login-userinfo {
		margin-top: 40rpx;

		.avatar {
			background: linear-gradient(180deg, #fc3826FF, #f49d95FF);
			width: 120rpx;
			height: 120rpx;
			border-radius: 50%;
			display: flex;
			justify-content: center;
			align-items: center;
			padding: 0;

			image {
				width: 100%;
				height: 100%;
			}
		}

		.iconfont {
			color: #fff;
			font-size: 80rpx;
		}

		.login-nickname {
			// width: 450rpx;
			margin-bottom: 30rpx;

			text {
				font-weight: 700;
				font-size: 30rpx;
				color: #2F3133;
				display: block;
				margin-bottom: 10rpx;
			}

			.login-input {
				margin: 10rpx 0;
				// padding: 10rpx 0;
				border-bottom: 4rpx solid #e7e7e7;
			}

			input {
				height: 80rpx;
				line-height: 80rpx;
				font-size: 30rpx;
				font-weight: 700;
			}
		}
	}

	.login-btn {
		margin-top: 80rpx;

		button {
			width: 520rpx;
			height: 100rpx;
			line-height: 100rpx;
			border-radius: 50rpx;
			font-weight: 700;
			font-size: 30rpx;
			color: #FFFFFF;
			margin-bottom: 30rpx;
		}

		.wxlogin {
			background: linear-gradient(180deg, #FC3826, #F49D95);
		}

		.phonelogin {}
	}
}

.login-tips {
	font-weight: 600;
	font-size: 24rpx;
	color: #A5A5A5;
	text-align: center;
	margin-top: 30rpx;
}

.agreement-box {
	font-weight: 600;
	font-size: 24rpx;
	color: #A5A5A5;
	text-align: center;
	margin-top: 30rpx;

	.agreement-txt {
		display: flex;
	}

	.agreement {
		color: #FD3523FF;
	}
}
</style>